<template>
  <div>
    <h2 style="height: 11.8rem" class="title">
      <span>{{ cityName }}--详情</span>
    </h2>
    <div id="cityMap" style="width: 7.2rem; height: 10rem"></div>
  </div>
</template>
<script>
import api from '@/api/index.js'
export default {
  props: {
    cityName: {
      type: String,
      default: '城市'
    }
  },
  data () {
    return {}
  },
  components: {},
  computed: {},
  methods: {},
  mounted () {
    api.getCityData(this.cityName).then((res) => {
      const arr = res.data.retdata.subList
      console.log(arr)
      const newArr = []
      arr.forEach((ele) => {
        const obj = {}
        console.log(ele.city)
        if (ele.city.endsWith('区') || ele.city.endsWith('盟')) {
          obj.name = ele.city
          console.log(1, ele.city)
        } else {
          console.log(ele.city)
          obj.name = ele.city + '市'
        }
        obj.value = Number(ele.curConfirm) // 当前确诊
        newArr.push(obj)
      })
      console.log(newArr)
      this.$myCharts.cityMap('cityMap', this.cityName, newArr)
    })
  }
}
</script>
<style lang="less" scoped>
#cityMap {
  margin: auto;
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 0.1rem;
}
.title {
  display: flex;
  position: relative;
  justify-content: center;
  padding-top: 0.2rem;
  color: #666;
  background-color: rgb(0, 255, 179);
}
</style>
